<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>
    <el-descriptions border :column="column">
      <el-descriptions-item label="计次卡" align="left" label-align="left"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="剩余次数"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="次数不足"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="计时卡"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="即将到期"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :span="2"
        :width="120"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="计时计次卡"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 32 }}张</el-descriptions-item
      >
      <el-descriptions-item
        label="剩余次数"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 150 }} 次</el-descriptions-item
      >
      <el-descriptions-item
        label="次数不足"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ 150 }} 张</el-descriptions-item
      >
    </el-descriptions>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { useHook } from './hook'
const { matchMedia } = useHook()
const column = ref(6)
const matchType = ref('xl')
const labelWidth = ref(80)

const setColumn = () => {
  const type = matchMedia()
  matchType.value = type
  if (type == 'xs') {
    column.value = 3
    labelWidth.value = 80
  } else if (type == 'sm') {
    column.value = 3
    labelWidth.value = 80
  } else if (type == 'md') {
    column.value = 3
    labelWidth.value = 80
  } else if (type == 'lg') {
    column.value = 3
    labelWidth.value = 150
  } else if (type == 'xl') {
    column.value = 3
    labelWidth.value = 65
  }
}
window.onresize = () => {
  setColumn()
}
onMounted(() => {
  setColumn()
})
const { user } = defineProps<{ user: UserApi.UserVO }>()
</script>
